<template>
<div class="set-images">
    <!-- <div class="pop-name">图片设置</div> -->
    <div class="images">
        <div v-if="totalImages.length" class="image"
            @drop.prevent="drop($event,img,index)"
            @dragover.prevent=""
            v-for="(img,index) in totalImages" :key="img.index">
            <el-image class="pic" @click="showImageAttribute(index)"
            :src="img.url"
            :fit="'cover'"></el-image>
            <span class="close"><i class="iconfont iconclose"></i></span>
            <span class="drag" @dragstart="drag($event,img,index)" draggable="true"><i class="iconfont iconoperate"></i></span>
        </div>
        <div class="place" v-else >+虚位以待</div>
    </div>
    <div class="attributes">
        <div class="add-image clearfix">
            <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-success="uploadImageSuccess"
                :on-progress="uploadProgress" 
                :show-file-list="false"
                :file-list="totalImages"
                list-type="picture">
                <el-button type="info">点击上传</el-button>
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
            <el-button class="choose" type="default" @click="selectSourceImages"><i class="iconfont iconselect"></i>图库中选择</el-button>
        </div>
        <div class="attribute">
            <label class="name">标题</label>
            <el-input v-model="imageAttribute.title" placeholder="请输入内容"></el-input>
        </div>
        <div class="attribute">
            <label class="name">链接</label>
            <el-input v-model="imageAttribute.url" placeholder="请输入内容"></el-input>
        </div>
        <div class="attribute">
            <label class="name">时间</label>
            <el-date-picker
              v-model="period"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['12:00:00']">
            </el-date-picker>
        </div>
        <div class="attribute">
          <label class="name">类型</label>
            <el-select v-model="imageAttribute.type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>
        <div class="attribute">
            <span class="name">学段</span>
            <el-radio-group v-model="imageAttribute.stage" size="medium">
               <el-radio border size="medium" label="不限"></el-radio>
               <el-radio border label="高中"></el-radio>
               <el-radio border label="初中"></el-radio>
               <el-radio border label="小学"></el-radio>
            </el-radio-group>
        </div>
        <div class="attribute">
            <span class="name">学科</span>
            <el-radio-group v-model="imageAttribute.stage" size="medium">
               <el-radio border  size="medium" label="不限"></el-radio>
               <el-radio border label="语文"></el-radio>
               <el-radio border label="数学"></el-radio>
               <el-radio border label="物理"></el-radio>
               <el-radio border label="化学"></el-radio>
               <el-radio border label="生物"></el-radio>
               <el-radio border label="政治"></el-radio>
               <el-radio border label="历史"></el-radio>
               <el-radio border label="地理"></el-radio>
               <el-radio border label="综合"></el-radio>
            </el-radio-group>
        </div>
    </div>
    <div class="tool-buttons">
        <el-button>取消</el-button>
        <el-button type="primary">保存设置</el-button>
    </div>
</div>
</template>  
<script>
export default{
    props:{
        images:{
          type:Array,
          default:function(){
            return []
          }
        }
    },
    data() {
      return {
        //图片属性
        imageAttribute:{},
        //图片有效期
        period:'',
        //上传的图片以及已有的图片列表
        totalImages:[],
        options: [
            {
          value: '选项1',
          label: '黄金糕'
            }, {
          value: '选项2',
          label: '双皮奶'
            }, {
          value: '选项3',
          label: '蚵仔煎'
            }, {
          value: '选项4',
          label: '龙须面'
            }, {
          value: '选项5',
          label: '北京烤鸭'
            }
        ],
        //正在拖拽的元素
        dragElement:null,
      };
    },
    methods: {
        //显示选择图库的图片
        selectSourceImages(){
            console.log('set');
            this.$emit('showSourceImagesMethod');
        },
        //显示图片信息
        showImageAttribute(id){
            this.imageAttribute = this.totalImages[id]
        },
        uploadProgress(){
            this.$message({
                showClose: true,
                message: '正在上传',
                type: 'warning'
            });
        },
        uploadImageSuccess(response,file,fileList) {
            this.$message({
                showClose: true,
                message: '上传成功',
                type: 'success'
            });
            this.totalImages.push(file);
        },
        drag(event,img,index) {
            this.dragElement = img;
            //this.totalImages.splice(index,1);
            console.log('drag',index);
        },
        drop(event,img,index){
            this.totalImages.splice(index,0,this.dragElement);
            console.log('drop',index,this.totalImages);
        },
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        }
    },
    mounted:function(){
        //显示第一个图片的信息
        this.totalImages = this.totalImages.concat(this.images);
        this.imageAttribute = this.images[0];
        this.period = [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]
    }
}
</script>   
<style scoped lang="scss">
.list-complete-item {
  transition: all 1s;
  display: inline-block;
  margin-right: 10px;
}
.list-complete-enter, .list-complete-leave-to
/* .list-complete-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
.list-complete-leave-active {
  position: absolute;
}
.set-images{
    width:740px;
   // padding:30px 30px 32px;
    background:#fff;
    border-radius: 4px;
    .pop-name{
        font-size: 18px;
        color: #0F1B41;
        line-height: 18px;
    }
    .images{
      //  margin-top:35px;
        float:left;
        width:220px;
        .image,.pic{
            position: relative;
            width:100%;
            height:70px;
        }
        .image{
            margin-bottom:20px;
            background:#f2f2f2;
            cursor: pointer;
            overflow: hidden;
            &:hover{
                .close{
                top:3px;
                left:3px;
                }
                .drag{
                    right:0;
                }
            }
        }
        .close{
            position: absolute;
            top:-13px;
            left:-13px;
            width:13px;
            height:13px;
            background: rgba(0,0,0,0.50);
            border-radius: 2px;
            transition:all 0.2s;
            .iconfont{
                font-size:12px;
            }
        }
        .drag{
            position: absolute;
            top:0;
            right:-20px;
            width:20px;
            height:100%;
            background: rgba(0,0,0,0.50);
            border-radius: 9px 2px 2px 9px;
             transition:all 0.2s;
            .iconfont{
                font-size:12px;
                color:#fff;
            }
        }
        .place{
            width:220px;
            height:70px;
            line-height: 68px;
            text-align: center;
            background: #FFFFFF;
            border: 1px dotted #A4ADC8;
            border-radius: 2px;
            font-size: 14px;
            color: #A4ADC8;
        }
    }
    .attributes{
     //   margin-top: 35px;;
        float:right;
        width:468px;
        .add-image{
            margin-bottom:30px;
        }
        .upload-demo{
            float:left;
        }
        .el-button{
            width:220px;
            height:36px;
        }
        .choose{
            float:right;
            width:220px;
            height:36px;
            background: #F0F0F0;
            border-radius: 4px;
            .iconfont{
                margin-right:10px;
                font-size:12px;
            }
        }
        .attribute{
            margin-bottom:20px;
            &:after{
                display:block;
                content:'.';
                clear: both;
                font-size: 0;
            }
            .name{
                float:left;
                font-size: 14px;
                color: #5A7180;
                line-height: 36px;
            }
            .el-radio-group,.el-input,.el-select,.el-range-editor,.options{
                float:right;
                width:422px;
            }
            .el-radio{
                margin-right:10px;
                margin-left:0;
            }
            .options{
                .item{
                    float:left;
                    margin:0 10px 10px 0;
                    width:60px;
                    height:36px;
                    line-height:34px;
                    background: #FFFFFF;
                    border: 1px solid #F2F2F2;;
                    border-radius: 2px;
                    font-size: 14px;
                    text-align: center;
                    cursor: pointer;
                    &.on,&:hover{
                        color:#5A7180;
                        border-color:#FDD5A2 ;
                    }
                }
            }
        }
    }
    .tool-buttons{
        padding:32px 0 0;
        clear: both;
        text-align: center;
        border-top:1px solid #eaeaea;
    }
}
</style>
